<template>
  <div class="page-container">
    <!--表格内容栏-->
    <cm-table
      ref="dataTable"
      pkName="id"
      :filters="filters"
      :filterFields="filterFields"
      :columns="columns"
      :defaultSort="defaultSort"
      @handleTableOperator="handleTableOperator"
      @handleCellOperator="handleCellOperator"
    ></cm-table>
    <!--新增/编辑/查看界面-->
    <div class="edit-dialog">
      <el-dialog
        :title="dialogTitle"
        width="65%"
        v-model="dialogVisible"
        :close-on-click-modal="false"
        destroy-on-close
        draggable
      >
        <el-form
          :model="formData"
          label-width="120px"
          :disabled="!dialogEdit"
          :rules="rules"
          :hide-required-asterisk="!dialogEdit"
          ref="dataForm"
          label-position="right"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务ID" prop="taskId">
                <el-input v-model="formData.taskId" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Bean名称" prop="beanName">
                <el-input v-model="formData.beanName" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="方法名" prop="methodName">
                <el-input v-model="formData.methodName" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参数" prop="params">
                <el-input v-model="formData.params" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <cm-select v-model="formData.status" dicCode="dicScheduleLogStatus"></cm-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开始时间" prop="startTime">
                <el-input v-model="formData.startTime" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="endTime">
                <el-input v-model="formData.endTime" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="失败信息" prop="errorMessage">
                <el-input v-model="formData.errorMessage" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="耗时" prop="timeConsume">
                <el-input v-model="formData.timeConsume" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="formData.createTime" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <el-button
            v-if="dialogEdit"
            size="large"
            type="info"
            @click="dialogVisible=false">取消</el-button>
          <el-button
            v-if="dialogEdit"
            size="large"
            type="primary"
            @click="submitForm"
            :loading="editLoading"
          >提交</el-button>
          <el-button
            v-if="!dialogEdit"
            size="large"
            type="info"
            @click="dialogVisible=false"
          >关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {ref, nextTick} from 'vue'

const filters = ref({
  beanName: '',
  methodName: ''
}) // 分页查询条件
const filterFields = ref([
  {prop: "beanName", label: "bean名"},
  {prop: "methodName", label: "方法名"},
  {prop: "status", label: "状态", type: 'select', dicCode: 'dicScheduleLogStatus'},
])
const columns = ref([
  {prop: "beanName", label: "Bean名", minWidth: 140},
  {prop: "methodName", label: "方法名", minWidth: 140},
  {prop: "params", label: "参数", minWidth: 120},
  {prop: "status", label: "状态", minWidth: 100, type: 'select', dicCode: 'dicScheduleLogStatus'},
  {prop: "startTime", label: "开始时间", minWidth: 160},
  {prop: "endTime", label: "结束时间", minWidth: 160},
  {prop: "errorMessage", label: "失败信息", minWidth: 140},
  {prop: "timeConsume", label: "耗时(毫秒)", minWidth: 120},
  {prop: "createTime", label: "创建时间", minWidth: 160}
]) // 分页列表字段
const defaultSort = ref({prop: 'createTime', order: 'descending'}) // 分页排序

const dialogTitle = ref('') // 新增/编辑/查看弹窗标题
const dialogVisible = ref(false) // 弹窗是否显示
const dialogEdit = ref(true) // 弹窗表单是否可编辑
const editLoading = ref(false) // 弹窗表单提交状态
const rules = ref({
  beanName: [{required: true, message: '请输入Bean名', trigger: 'blur'}],
  methodName: [{required: true, message: '请输入方法名', trigger: 'blur'}],
  params: [{required: true, message: '请输入参数', trigger: 'blur'}],
  status: [{required: true, message: '请输入状态', trigger: 'blur'}],
  startTime: [{required: true, message: '请输入开始时间', trigger: 'blur'}],
  endTime: [{required: true, message: '请输入结束时间', trigger: 'blur'}],
  errorMessage: [{required: true, message: '请输入失败信息', trigger: 'blur'}],
  timeConsume: [{required: true, message: '请输入耗时', trigger: 'blur'}],
  createTime: [{required: true, message: '请输入创建时间', trigger: 'blur'}]
}) // 弹窗表单数据验证规则
const formData = ref({}) // 弹窗表单数据
const dataForm = ref() // 弹窗表单数据

// 单元格操作
const handleCellOperator = (property, value, row) => {
  formData.value = Object.assign({}, row);
  dialogVisible.value = true;
  dialogEdit.value = false;
  dialogTitle.value = "查看";

  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
}

// 显示操作界面
const handleTableOperator = (button, row) => {
  dialogVisible.value = true;
  dialogEdit.value = true;
  dialogTitle.value = button.name;
  if (button.buttonType === 'edit') {
    formData.value = Object.assign({}, row, {button: button});
  } else {
    formData.value = {button: button};
  }

  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
}
</script>